<template>
  <div>
    <!-- 头部 -->
    <div class="title">
      <router-link class="goback" to="/">
        <img src="../../assets/images/goback.png" alt="" />
      </router-link>
      <div class="text">{{title}}</div>
    </div>
    <!-- 大图 -->
    <div class="bigImg">
      <img :src="imgUrl" alt="" />
    </div>
    <!-- 产品 -->
    <Product :productData="manicureData" :isHm='isHm'/>
  </div>
</template>

<script>
import Product from "../../components/Product"
import api from "../../api"
export default {
  nama: "HomeManicure",
  components:{
    Product
  },
  data(){
    return{
      title:'',
      imgUrl:'',
      manicureData:[],
      isHm:'isHm'
    }
  },
  mounted(){
    api.getManicure().then(res=>{
      // console.log(res.data);
      this.title = res.data.title
      this.imgUrl = res.data.imgUrl
      this.manicureData = res.data.list
      // this.$emit('getTitle',this.title)
    })
  }
};
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  .goback {
    width: 26px;
    height: 26px;
    margin: 9px 11px 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    width: 65px;
    height: 23px;
    text-align: center;
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    text-align: center;
    font-family: Arial;
    margin: 0 120px;
  }
}
// 大图
.bigImg {
  width: 100%;
  height: 99px;
  img {
    width: 100%;
    height: 100%;
  }
}
// // 产品
// .product-list {
//   width: 100%;
//   .list-item {
//     height: 111px;
//     border: 1px solid #eee;
//     padding: 11.5px 11px;
//     box-sizing: border-box;
//     display: flex;
//     .img {
//       width: 126px;
//       height: 85px;
//       margin-right: 11px;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//     .info {
//       width: 200px;
//       .pro-title {
//         width: 196px;
//         height: 23px;
//         line-height: 20px;
//         color: rgba(16, 16, 16, 1);
//         font-size: 14px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         white-space: nowrap;
//         margin: 8px 0 13px;
//       }
//       .desc {
//         // width: 200px;
//         height: 34px;
//         line-height: 17px;
//         color: rgba(153, 153, 153, 1);
//         font-size: 12px;
//         display: -webkit-box;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         display: -webkit-box;
//         -webkit-line-clamp: 2;
//         -webkit-box-orient: vertical;
//       }
//     }
//   }
// }
</style>